<template>
	<view class="content">
		<view class="header">
			当前设备: {{macno}}
		</view>
		<view class="cont">
			<view class="tips">
				<h5 class="" v-if="userInfo.is_register == 1" @click="goRegister">
					您还未注册哦，如需注册，<i>请注册~</i>
				</h5>
				<h5 class="" v-if="userInfo.is_register == 2">
					您已是注册用户，请进行正常投递~
				</h5>
			</view>
			<h3 class="title">垃圾类别</h3>
			<view class="list">
				<view class="list_item" v-for="(item,index) in userInfo.device_chassis" :key="index" @click="chooseTab(item)">
					<!-- {{item}} -->
					<view class="_item">
						<img class="item-img" :src="item.img">
					</view>
					<!-- 禁用提示 -->
					<view class="msg" v-if='item.status == 2'>
						<view>{{item.class_name}}</view>
						<view>分类异常</view>
						<view>请勿投放</view>
					</view>
					 <!-- 已满提示 -->
					<view class="msg" v-if="item.fullness_now == 1 && item.status != 2">
						<view>{{item.class_name}}</view>
						<view>分类已满</view>
						<view>请勿投放</view>
					</view>
					<!-- 选择提示 -->
					<view class="msg tip-choose" v-if="item.id == tabFlag"></view>
				</view>
			</view>
			<h4 class="desc">请您选择正确的分类并打开投放口</h4>
			<view class="btn">
				<u-button type="primary" :disabled="disabled" :text='disabled ? "投递中~~" :"打开投放口"' @click="openBtn"></u-button>
			</view>
		</view>
		<u-popup :show="modules.show" mode="center" @close="close">
			<view class="popup-box">
				<image class="img" :src="modules.img" mode="widthFix"></image>
				<view class="text">
					{{ modules.text }}
				</view>
			</view>
		</u-popup>
		<u-popup :show="loadMo.show" mode="center" @close="close">
			<view class="popup-box">
				<image class="img" :src="loadMo.img" mode="widthFix"></image>
				<view class="text">
					{{ loadMo.text }}
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				macno: '',
				userInfo: {},
				items: [],
				// 提交数据部分的参数
				req:{
				  id:"",
				},
				modules: {
				  show: false,
				  img: require("../../static/icon_13.png"),
				  text:"请选择垃圾类别",
				  time: 2000,
				},
				loadMo: {
				  show: false,
				  img: require("../../static/icon_15.png"),
				  text:"打开中",
				},
				success:false,
				disabled: false,
				macno:"",
				newData:"",
				tabFlag: "",
				user_id:'',
				// 提交数据部分的参数
				req:{
				  id:"",
				},
				orderInfo:"",
				IntervalNum:0,
				t1:'',
			}
		},
		onLoad() {
			this.macno = uni.getStorageSync("macno").split('#')[0]
			this.getuserInfo()
			this.deliveryPage()
			this.wsStart();
		},
		methods: {
			goRegister(){
				uni.reLaunch({
					url: '/pages/register/register'
				})
			},
			getuserInfo(){
				var _this = this
				this.fq_get('wxsite/User/userImgv2', {}, (res) => {
					if(res.code == 1){
						_this.user_id = res.data.user_id
					}
				})
			},
			// webSocket 启动
			wsStart(){
				// this.mySocket(`ws://120.77.72.190:9999`);
				this.mySocket(`ws://39.99.175.250:9999`);
				this.t1 = setInterval(res=>{
				  this.IntervalNum++
				  if(this.IntervalNum%30 == 1){
					  this.websocketOpenSend(`connectinfo_ynd_${this.user_id}`);
				  }
				},1000)
			},
			// WebSocket检测子账号是否绑定成功
			websocketopen(){//打开
				console.log(`
					WebSocket连接成功
					给后台WebSocket连接成功发送的消息参数==》
					connectinfo_ynd_${this.user_id}`)
				// send() 方法发送数据 服务端发给后台的唯一标识 与后台预定好
				this.websocketOpenSend(`connectinfo_ynd_${this.user_id}`);
			},
			      // 返回的数据
			      websocketonmessage(response){ //数据接收
			        let _self=this;
			        let { data } = response;
			        let myData = JSON.parse(data);
			        if( myData.status == "succees" ){
			            console.log("链接的应答==>",myData)
			            return
			        }
			        console.log(`websocketonmessage=data`, JSON.parse(data));
			        if( myData.code == 1 ){
			          this.success = true;
			          this.loadMo.show = false;
			          this.show_cil=true;
			          let timer=setInterval(function(){
			            if(myData.data.integral>=0){
			              _self.show_cil=false;
			              clearInterval(timer);
			            }
			          },1000);
			          if(!myData.data){
			            this.modules.img = require("../../static/icon_16.png");
			            this.modules.text = "打开成功";
			            this.modules.show = true;
			            this.disabled = true;
			          }else{
			            
			            this.orderInfo = myData.data;
			            this.disabled = false;
			            this.tabFlag = "";
			            this.req.id = "";
			          }
			
			        }else{
			          this.loadMo.show = false;
			          this.modules.img = require("../../static/icon_14.png");
			          this.modules.text = "打开失败";
			          this.modules.show = true;
			        }
			      },
			      mySocket(wsUrl) {
			        let socket = "";
			        if (!window.WebSocket) {
			          window.WebSocket = window.MozWebSocket;
			        }
			        if (window.WebSocket) {
			          this.initWebpack(wsUrl);
			        } else {
			          alert("你的请求不支持 WebSocket！");
			        }
			      },
			      initWebpack(wsUrl){//初始化websocket
			        let wsuri = wsUrl;
			        wsuri = wsuri.replace('http', 'ws');
			        console.log("请求链接地址==》",wsuri);
			        this.websock = new WebSocket(wsuri);//这里面的this都指向vue
			        // websocket发起连接
			        this.websock.onopen = this.websocketopen;
			        // WebSocket连接成功接受数据
			        this.websock.onmessage = this.websocketonmessage;
			        // WebSocket连接失败提示
			        this.websock.onerror = this.websocketerror;
			      },
			      // Web Socket 已连接上
			      websocketOpenSend(sendData){ //使用 send() 方法发送数据
			        this.websock.send(sendData);
			        console.log("发送数据^~^");
			      },
			      websocketerror(){  //失败
			        console.log("WebSocket连接失败");
			      },
			      websocketclose(){  //关闭
			        this.IntervalNum = 0
			        clearInterval(this.t1)
			        console.log("WebSocket关闭");
			      },
			    
			deliveryPage(){
				var _this = this
				this.fq_post('wxsite/User/deliveryPage', {
					macno: this.macno
				}, (res) => {
					if(res.code == 1){
						_this.userInfo = res.data
						// _this.items = res.data
					}
				})
			},
			// 选择投递垃圾类型
			chooseTab(item){
				if( item.status == 2 ){
				 uni.showToast({
					title: `${item.class_name}分类异常请勿投放`,
					icon: 'none'
				 })
				  return;
				}
				if( item.fullness_now == 1 ){
				  uni.showToast({
					title: `${item.class_name}分类已满请勿投放`,
					icon: 'none'
				  })
				  return;
				}
				this.tabFlag = item.id;
				this.req.id = this.tabFlag
			},
			close(){
				this.modules.show = false
				this.loadMo.show = false
			},
			//确认投递
			openBtn(){
			  if( this.req.id == '' ){
				// 请选择垃圾类别
				this.modules.img = require("../../static/icon_13.png");
				this.modules.text = "请选择垃圾类别";
				this.modules.show = true;
				return
			  }
			  this.addOrder(this.req.id);
			},
		
			// 垃圾投递
		  addOrder(type_id){
			var _this = this
			this.fq_post('wxsite/Recovery/addOrder', {
				macno: this.macno,
				type_id: type_id
			}, (res) => {
				if(res.code == 1){
					this.loadMo.show = true;
				}else{
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				}
			})
		  },
		}
	}
</script>

<style scoped>
.content{
	background-color: #F6F6f6;
	min-height: 100vh;
}
.header{
	height: 30px;
	line-height: 30px;
	background-color: #fff;
	padding: 10px;
}
.cont{
	background-color: #fff;
	margin-top: 10px;
	height: calc(100vh - 60px);
}
.tips{
	text-align: right;
	padding: 10px;
	color: #999;
}
.title{
	font-size: 15px;
	padding: 10px;
}
.list{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	align-items: center;
}
.list_item{
	margin-top: 20px;
	position: relative;
}
.msg{
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.7);
	border-radius: 10px;
	color: #fff;
	text-align: center;
	/* line-height: 100px; */
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	z-index: 2;
	/* flex-wrap: wrap; */
	/* justify-content: center; */
	/* align-items: center; */
}
.tip-choose{
	background:rgba(0,0,0,.6) url('../../static/icon_21.png') no-repeat;
	background-size: 90px;
	background-position: 25px;
}
.desc{
	font-size: 16px;
	text-align: center;
	color: #999;
	margin-top: 30px;
}
.btn{
	margin:20px 10px;
}
.popup-box{
	text-align: center;
	width: 200px;
	padding: 20px;
}
.popup-box .img{
	
	width: 50px;
}
.popup-box .text{
	font-size: 18px;
	padding: 10px;
	color: #23c3aa;
}
</style>
